<template>
  <div class="recharge">
    <div class="xian"></div>
    <el-form ref="form" :model="form" label-width="100px">
      <el-row :gutter="20">
        <el-col :span="20">
          <el-form-item label="输入充值金额">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="充值方式" id="zhifuss2">
            <el-button class="active" @click="btn1"><img src="static/images/weixin_03.png" alt=""><img src="static/images/weixin1.png" alt="">微信支付</el-button>
            <el-button @click="btn2"><img src="static/images/zhifubao1.png" alt=""><img src="static/images/zhifubao_05.jpg" alt="">支付宝支付</el-button>
          </el-form-item>
          <el-form-item label="">
            <span style="color:#ff8b00;font-size:17px;">应支付：44551.00元</span>
            <div id="erweimas2">
              <div class="erweima1 active" id="btn1">
                <img src="static/images/erweima_10.jpg" alt="">
                <p><span><img src="static/images/weixin_03.png" alt=""></span>使用微信扫码付款</p>
              </div>
              <div class="erweima1"  id="btn2">
                <img src="static/images/erweima_10.jpg" alt="">
                <p><span><img src="static/images/zhifubao1.png" alt=""></span>使用支付宝扫码付款</p>
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-dialog :visible.sync="success" class="successTip">
      <img src="static/images/sucsere.png">
      <div class="tip tip1">支付成功</div>
    </el-dialog>
    <el-dialog :visible.sync="fail" class="successTip">
      <img src="static/images/fail.png">
      <div class="tip tip2">支付失败，请重新支付</div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data(){
    return {
      success: false,
      fail: false,
      form:{}
    }
  },
  methods:{
    btn1(){
      document.getElementById("btn2").className="erweima1";
      document.getElementById("btn1").className="erweima1 active";
    },
    btn2(){
      document.getElementById("btn2").className="active erweima1";
      document.getElementById("btn1").className="erweima1";
    }
  },
 updated(){
   
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
.successTip .el-dialog{ width: 90%; max-width: 368px; text-align: center;}
.successTip .el-dialog__header{ padding: 0;}
.successTip .el-dialog__body img{ margin: 0 auto 15px;}
.tip{ font-size: 24px;}
.tip1{ color: #67c23a;}
.tip2{ color: #ff5129;}
.recharge .el-form .el-button:first-child.active{
  background: #3daf32 !important;
  margin-right: 30px;
  color: #fff !important;
   img:first-child{
    display: inline-block;
  }
  img:last-child{
    display: none;
  }
}
.recharge .el-form .el-button:last-child.active{
  border: 1px solid #2197d8 !important;
    color: #fff !important;
    background: #2197d8 !important;
     img:first-child{
    display: inline-block;
  }
  img:last-child{
    display: none;
  }
}
.recharge {
  border-radius: 8px;
  background: #fff;
  .el-form {
    width: 90%;
    margin: 0 auto;
    padding: 20px 0;
    .el-button {
      padding: 12px 30px 12px 56px;
      font-size: 16px;
      position: relative;
      img {
        margin-right: 8px;
        position: absolute;
        top: 9px;
        left: 25px;
      }
    }
    .weixin {
      background: none;
      margin-right: 30px;
      border: 1px solid #3daf32;
      color: #3daf32;
      img:nth-child(1) {
        display: none;
      }
      &:hover {
        background: #3daf32;
        border: 1px solid #3daf32;
        color: #fff;
        img:nth-child(1) {
          display: inline-block;
        }
        img:nth-child(2) {
          display: none;
        }
      }
    }
    .zhifubao {
      border: 1px solid #2197d8;
      color: #2197d8;
      img:nth-child(2) {
        display: none;
      }
      &:hover {
        background: #2197d8;
        border: 1px solid #2197d8;
        color: #fff;
        img:nth-child(2) {
          display: inline-block;
        }
        img:nth-child(1) {
          display: none;
        }
      }
    }
    .erweima1 {
      display: none;
      &.active{
        display: block;
      }
      img {
        display: inline-block;
      }
      p {
        margin-top: 0;
        span {
          text-align: center;
          background: #3daf32;
          margin-right: 8px;
          border-radius: 50%;
          width: 40px;
          height: 40px;
          position: relative;
          top: 13px;
          display: inline-block;
          img {
            margin: 9px auto;
          }
        }
      }
    }
  }
  .xian {
    height: 15px;
    background: rgb(255, 139, 0);
    border-radius: 15px;
    margin-bottom: 15px;
  }
}
</style>
<style rel="stylesheet/scss" lang="scss">
@media screen and (max-width: 768px) {
  .recharge .el-form-item__label {
    text-align: left;
  }
  .recharge .el-col-20 {
    width: 100% !important;
  }
  .recharge .weixin {
    float: left;
    margin-left: 0;
    margin-bottom: 12px;
  }
  .recharge .el-form-item__content {
    width: 100% !important;
    margin-left: 0 !important;
  }
  .recharge .el-form .zhifubao {
    margin-left: 0;
  }
  .recharge .el-form-item {
    margin-bottom: 10px;
  }
  .recharge .el-form .erweima1 p span {
    width: 30px !important;
    height: 30px !important;
    top: 10px !important;
  }
  .recharge .el-form .erweima1 p span img {
    margin: 7px auto !important;
    height: 16px;
  }
}
@media screen and (max-width: 460px) {
  .recharge .el-form-item__label {
    width: 100% !important;
  }
}
</style>
